import 'dart:math';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xvideos/assets_tool/app_colors.dart';
import 'package:xvideos/assets_tool/images.dart';
import 'package:xvideos/hj_page/mine_business/ai/ai_face_sub_logic.dart';
import 'package:xvideos/hj_page/mine_business/ai/ai_mod_detail_page.dart';
import 'package:xvideos/hj_page/mine_business/ai/mode/AiModList.dart';
import 'package:xvideos/hj_utils/widget_utils.dart';
import 'package:xvideos/tools_base/loading/l_error_widget.dart';
import 'package:xvideos/tools_base/loading/loading_center_widget.dart';
import 'package:xvideos/tools_base/widget/net_image_widget.dart';

class AIFaceChangeSubPage extends StatefulWidget {
  final AICategoryMod? mod;
  final int type; // 0-视频换脸 1-图片
  const AIFaceChangeSubPage({super.key, this.mod, this.type = 0});

  @override
  State<AIFaceChangeSubPage> createState() => _AIChangeFaceState();
}

class _AIChangeFaceState extends State<AIFaceChangeSubPage> {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<AIFaceChangeLogic>(
      init: AIFaceChangeLogic(mod: widget.mod, type: widget.type),
      global: false,
      builder: (_) {
        if (_.dataList == null) return LoadingCenterWidget();
        if (_.dataList?.isEmpty == true)
          return CErrorWidget(
            retryOnTap: () => _.loadData(),
          );
        return Column(
          children: [
            12.sizeBoxH,
            _buildSortView(_),
            12.sizeBoxH,
            Expanded(
              child: GridView.builder(
                padding: EdgeInsets.fromLTRB(16, 0, 16, 20),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: _.crossAxisCount,
                  mainAxisSpacing: _.spacing,
                  crossAxisSpacing: _.spacing,
                  childAspectRatio: _.ratio,
                ),
                itemCount: _.dataList?.length ?? 0,
                itemBuilder: (context, index) {
                  TemplateModel? model = _.dataList?[index];
                  return InkWell(
                    onTap: () => Get.to(AIModDetailPage(model!)),
                    child: NetworkImageLoader(imageUrl: model?.cover ?? ''),
                  );
                },
              ),
            ),
          ],
        );
      },
    );
  }

  _buildSortView(AIFaceChangeLogic _) {
    return Row(
      children: [
        Spacer(),
        _buildSortItem(_.sortType[0], _.ascending, 0, _),
        20.sizeBoxW,
        _buildSortItem(_.sortType[1], _.ascending, 1, _),
        20.sizeBoxW,
        _buildSortItem(_.sortType[2], _.ascending, 2, _),
        Spacer(),
      ],
    );
  }

  _buildSortItem(String title, bool ascending, int sortIndex, AIFaceChangeLogic _) {
    bool sel = _.sortIndex == sortIndex;
    return InkWell(
      onTap: () => _.changeSortAction(sortIndex),
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 5, vertical: 3),
        decoration: BoxDecoration(
          border: Border.all(
            width: 1,
            color: Color(0xff989898),
          ),
          borderRadius: BorderRadius.circular(999),
        ),
        child: Row(
          children: [
            Text(
              title,
              style: textStyle(12, sel ? AppColors.actionRed : Colors.white.withOpacity(.45), FontWeight.w400),
            ),
            2.sizeBoxW,
            Column(
              children: [
                Image.asset(
                  'ai_narrow.png'.aiPath,
                  width: 7,
                  color: sel && ascending ? AppColors.actionRed : null,
                ),
                4.sizeBoxH,
                Transform.rotate(
                  angle: (-pi),
                  child: Image.asset(
                    'ai_narrow.png'.aiPath,
                    width: 7,
                    color: sel && !ascending ? AppColors.actionRed : null,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
